<template>
    <div class="zhuanti">
        <div class="title">专题精选</div>
        <van-swipe :loop="false" :width="300" :show-indicators="false">
            <van-swipe-item v-for="item in topicList" :key="item.id">
                <img :src="item.item_pic_url" alt="" />
                <h2>
                    {{ item.title }}
                    <span style="color: darkred">{{ item.price_info | formatPrice }}起</span>
                </h2>
                <p>{{ item.subtitle }}</p>
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
export default {
    props: ['topicList'],
    data() {
        return {};
    },
};
</script>

<style lang="less" scoped>
.zhuanti {
    margin-top: 20px;
    background-color: #fff;
    margin-bottom: 20px;
    padding: 0 8px;
    .title {
        text-align: center;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
    }
    .van-swipe-item {
        margin-right: 15px;
        height: auto;
        padding-bottom: 10px;
        background-color: #fff;
        h2 {
            line-height: 40px;
            font-size: 16px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            width: 90%;
        }
        p {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            width: 90%;
        }
        img {
            width: 100%;
            height: 200px;
        }
    }
}
</style>
